/*eslint-disable*/
import {Canvas} from '@react-three/fiber'

// Center：这个组件用于将场景中的对象自动对齐到场景的中心。
// Environment：这个组件用于在 Three.js 场景中添加环境效果，比如天空盒、环境光、背景等。
import { Environment, Center } from '@react-three/drei';

import Shirt from './Shirt';
import Backdrop from './Backdrop';
import CameraRig from './CameraRig';
const CanvasModel = () => {
  return (
    <Canvas
      shadows
      // 设置相机的位置和视野,fov越大，视野越宽,图像越小，fov越小，反之。
      camera={{position:[0,0,0],fov:26}}

      // 设置画布的背景颜色
      gl={{ preserveDrawingBuffer: true}}
      // 设置画布的透明度
      className="w-full max-w-full h-full transition-all ease-in"
    >
      {/* 灯光 */}
      <ambientLight intensity={0.5}/>
      {/* 环境 */}
      <Environment preset="city" />

      {/* 相机 */}
      <CameraRig>
        {/* 背景图 */}
        {/* <Backdrop/> */}

      {/* 中心对齐 */}
      <Center>

        {/* 衣服 */}
        <Shirt/>

      </Center>
      </CameraRig>
    </Canvas>
  )
}

export default CanvasModel
